<template>
	<view class="add-after-sale">
		<view class="order-info">
			<view class="orchard-name">
				<text>{{order.orchardName}}</text>
			</view>
			<view class="spu-info">
				<view class="spu-info__left">
					<view class="spu-image">
						<image :src="order.picUrl"></image>
					</view>
				</view>
				<view class="spu-info__right">
					<view class="spu-info__right__row">
						<view class="order-spu-title">{{order.spuName}}</view>
						<view class="order-spu-price"> <span style="font-size: 24rpx;">￥</span> <span>{{getPayMoney(order.payPrice)}}</span> </view>
					</view>
					<view class="spu-info__right__row">
						<view class="order-spu-sku"> <span>规格：</span> <span>{{order.sku}}</span> </view>
						<view class="order-spu-count"> <span>共 {{order.count}} 件</span> </view>
					</view>
				</view>
			</view>
		</view>
		<view class="after-type">
			<uni-section class="mb-10" title="售后类型" @click="changeType(1)">
				<template v-slot:right>
					<view class="after-type-input">
						<uni-row>
							<uni-col :span="18">
								<span v-if="formData.way == 10">退款</span>
								<span v-else-if="formData.way == 20">退货退款</span>
								<span v-else>换货</span>
							</uni-col>
							<uni-col :span="6">
								<uni-icons type="right" size="20"></uni-icons>
							</uni-col>
						</uni-row>
					</view>
				</template>
			</uni-section>
		</view>
		<view class="after-apply-num">
			<uni-section class="mb-10" title="申请数量">
				<template v-slot:right>					
					<view class="after-apply-num-input">
						<uni-number-box :min="1" :max="order.count"></uni-number-box>
					</view>
				</template>
			</uni-section>
		</view>
		<view class="apply-reason">
			<view class="apply-reason-row">
				<span>申请原因</span>
			</view>
			<view class="apply-reason-row">
				<view class="apply-reason-input">
					<textarea v-model="formData.applyReason"  placeholder="输入申请售后原因" :maxlength="140" />
				</view>
			</view>
			<view class="apply-reason-row">
				<span style="display: block;position: relative;width: 100%;">图片附件 <text style="font-size: 18rpx;color: #666;">（最多上传4张图片）</text> </span> 
			</view>
			<view class="apply-reason-row">
				<view class="apply-reason-upload">
					<uni-file-picker class="upload-box" limit="4" 
						file-mediatype="image"
						mode="grid"
						file-extname="png,jpg,jpeg,gif"
						:auto-upload="false"
						@progress="progressHandle" 
						@success="uploadSuccess" 
						@delete="removeHandle"
						@select="selectFile">
					</uni-file-picker>
				</view>
			</view>
		</view>
		<view class="has-ask">
			<uni-section class="mb-10" title="是否已沟通" @click="changeType(2)">
				<template v-slot:right>					
					<view class="has-ask-input">
						<uni-row>
							<uni-col :span="18">
								<span v-if="formData.interact == 1">是</span>
								<span v-else>否</span>
							</uni-col>
							<uni-col :span="6" >
								<uni-icons type="right" size="20"></uni-icons>
							</uni-col>						
						</uni-row>
					</view>
				</template>
			</uni-section>
		</view>
		<view class="bottom-btns">
			<view class="apply-btn">
				<button class="add-btn" @click="submitForm">提交申请</button>
			</view>
		</view>
		<hqs-popup :title="title" v-model="showPopup">
			<view class="form-class">
				<view v-if="formType == 1" >
					<uni-data-select
					        v-model="formData.way"
					        :localdata="afterTypeOptions"				      
					        :clear="false"
					      ></uni-data-select>
				</view>
				<view v-if="formType == 2" >
					<uni-data-select
					        v-model="formData.interact"
					        :localdata="interactOptions"				      
					        :clear="false"
					      ></uni-data-select>
				</view>
				<view class="add-btn-box">
					<button class="add-btn" @click="confirmHandle">确 定</button>
				</view>
			</view>		   
		</hqs-popup>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	import uniIcon from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import hqsPopup from '@/components/hqs-popup/hqs-popup.vue'
	export default {
		components:{
			freeNavBar
		},
		onLoad(e) {
			if(e && e.orderId) {
				this.getOrderItemInfo(e.orderId);
				this.formData.orderItemId = e.orderId;
			}
		},
		data() {
			return {
				order: {},
				title: '售后类型',
				formData: {
					orderItemId: 0,
					way: 10,
					applyReason: '',
					applyPicUrls: [],
					interact: 0,
					applyNum: 1
				},
				afterTypeOptions: [
					{value: 10, text: '退款'},
					{value: 20, text: '退货退款'},
					{value: 30, text: '换货'}
				],
				interactOptions: [
					{value: 0, text: '否'},
					{value: 1, text: '是'}
				],
				formType: 1,
				showPopup: false
			}
		},
		methods: {
			getPayMoney(payPrice) {
				return $U.fenToYuan(payPrice);
			},
			getOrderItemInfo(itemId) {
				let _this = this;
				$H.get('/trade/order/item/get', {id: itemId}).then(res => {
					if(res) {
						_this.order = res
					}
				})
			},
			progressHandle(e) {},
			uploadSuccess(e) {},
			selectFile(e) {
				console.log(e)
				let files = e.tempFilePaths;
				let _this = this;
				if(files && files.length > 0) {
					for(var i = 0; i < files.length; i++) {
						let tempF = files[i];
						$H.upload('/infra/file/upload', {filePath: tempF, name: 'file'}).then(res => {
							if(res) {
								_this.formData.applyPicUrls.push(res);
							}
						})
					}
				}
			},
			removeHandle(e) {
				if(e && e.index >= 0) {
					this.formData.applyPicUrls.splice(e.index, 1);
				}
			},
			changeType(type) {
				let _this = this;
				this.formType = type;
				switch(type) {
					case 1: 
					    _this.title = '售后类型';
					    break;
					case 2:
					    _this.title = '是否已沟通';
					    break;
				}
				this.showPopup = true;
			},
			confirmHandle() {
				this.showPopup = false;
			},
			async submitForm() {				
				if(this.formData.applyReason == '' || this.formData.applyReason == undefined) {
					uni.showToast({
						title: '请输入申请原因',
						icon: 'none'
					});
					return;
				}
				let check = await $U.checkText(this.formData.applyReason);
				if(check) {
					$H.post('/trade/after-sale/create', this.formData).then(res => {
						if(res) {
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							});
							uni.navigateTo({url: '/pages/my/after-sale-list?status=0'});
						}
					})
				}
				else {
					uni.showToast({
						title: '监测到您所填内容可能包含违规内容，请更正，谢谢配合！',
						icon: 'none'
					});
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.add-after-sale {
	width: 100%;
	overflow-x: hidden;
	padding-bottom: calc(env(safe-area-inset-bottom) + 154rpx);
	.order-info {
		width: 100%;
		margin-top: 20rpx;
		background: #FFFFFF;
		.orchard-name {
			padding: 30rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
		}
		.spu-info {
			width: 100%;
			display: flex;
			flex-direction: row;
			.spu-info__left {
				padding: 10rpx 30rpx 30rpx 30rpx;
				.spu-image {
					width: 140rpx;
					height: 140rpx;
				}
				.spu-image image {
					width: 100%;
					height: 100%;
				}
			}
			.spu-info__right {
				flex: 10;
				padding-top: 20rpx;
				.spu-info__right__row {
					display: flex;
					flex-direction: row;
					margin-top: 10rpx;
				}
				.order-spu-title {
					width: calc(100% - 120rpx);
					max-width: calc(100% - 120rpx);
					font-size: 28rpx;
					color: #222222;
					overflow: hidden;
					word-wrap: break-word;
					overflow-wrap: break-word;
					margin-top: 5rpx;
				}
				.order-spu-price {
					width: 120rpx;
					text-align: right;
					margin-right: 30rpx;
					font-weight: bold;
					font-size: 34rpx;
					color: #000000;
				}
				.order-spu-sku {
					width: calc(100% - 120rpx);
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
				}
				.order-spu-count {
					width: 120rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					text-align: right;
					margin-right: 30rpx;
				}
			}
		}
	}
	.after-type {
		width: 100%;
		margin-top: 20rpx;
		.after-type-input {
			height: 100%;
			line-height: 40rpx;	
			margin-right: 20rpx;
		}
	}
	.after-apply-num {
		width: 100%;
		height: 100rpx;
		margin-top: 20rpx;
		.after-apply-num-input {
			position: relative;
			float: left;
			width: 100%;
		}
	}
	.apply-reason {
		width: 100%;
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 20rpx 0;
		span {
			display: block;
			width: 112rpx;
			height: 90rpx;
			line-height: 80rpx;
			font-size: 28rpx;
			color: rgb(51, 51, 51);
			margin-left: 20rpx;
		}
		.apply-reason-row {
			width: 100%;
			.apply-reason-input {
				width: calc(100% - 40rpx);
				height: 200rpx;
				background: #F4F4F4;
				margin-left: 20rpx;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
				textarea {
					padding: 20rpx;
					width: calc(100% - 40rpx);
					height: 100%;
				}
			}
			.apply-reason-upload {
				width: calc(100% - 40rpx);
				line-height: 60rpx;
				background: #FFFFFF;
				padding: 0;
				margin-left: 20rpx;
				.upload-box {
					position: relative;
					float: left;									
				}
				/deep/ .file-picker__box {
					width: 25% !important;					
					padding-top: 25%;
				}
			}
		}
		
	}
	.has-ask {
		width: 100%;
		margin-top: 20rpx;
		.has-ask-input {
			height: 100%;
			line-height: 40rpx;	
			margin-right: 20rpx;
		}
	}
	.bottom-btns {
		width: 100%;
		height: calc(env(safe-area-inset-bottom) + 134rpx);
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		.apply-btn {
			width: 100%;
			padding: 30rpx 0;
			background-color: #fff;
			.add-btn {
				width: 690rpx;
				height: 74rpx;
				line-height: 75rpx;
				color: #fff;
				background: #FD5052;
				border-radius: 37rpx 37rpx 37rpx 37rpx;
			}
		}
	}

	.form-class {
		position: relative;
		width: 100%;
		height: 460rpx;
		.add-btn-box {
			position: absolute;
			bottom:0rpx;
			width: 100%;
			.add-btn {
				width: 690rpx;
				height: 74rpx;
				line-height: 75rpx;
				color: #fff;
				background: #FD5052;
				border-radius: 37rpx 37rpx 37rpx 37rpx;
			}
			
		}			
	}
}
</style>
